<template>
	<view class="banner">
		<swiper class="swiper" circular :autoplay="autoplay" :interval="interval" :duration="duration" @change="changeBanner">
			<swiper-item v-for="(item,i) in bannerList" :key="i">
				<view class="swiper-item">
					<image class="img" mode="aspectFill" :src="$filters.oosImgZip(item)"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="numbox">{{current+1}}/{{bannerList.length}}</view>
		<!-- <view class="topBtn"> -->
			<!-- #ifndef MP-WEIXIN -->
			<!-- <view class="back" @click="$Foundation.goBack()"><image class="img" :src="$imgUrl + '/icon/back.png'" mode=""></image></view>
			<view class="share" @click="share"><image class="img" :src="$imgUrl + '/icon/share.png'" mode=""></image></view> -->
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<!-- <view class="back" @click="$Foundation.goBack()" :style="{top:statusBarHeight}"><image class="img" :src="$imgUrl + '/icon/back.png'" mode=""></image></view> -->
			<!-- #endif -->
		<!-- </view> -->
	</view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { onNavigationBarButtonTap } from "@dcloudio/uni-app"
import config from '@/utils/config'

const current = ref(0)
const autoplay = ref(true)
const interval = ref(2000)
const duration = ref(500)
const statusBarHeight = ref()

const props = defineProps({
	bannerList: {
		type: Array,
		default: []
	},
	roomName: {
		type: String,
		default: ''
	}
})

onMounted(() => {
	let res = uni.getSystemInfoSync()
	statusBarHeight.value = res.statusBarHeight + 6 + 'px'
})

const changeBanner = async(e)=>{
	current.value = e.detail.current
}

onNavigationBarButtonTap(()=>{
	let pages = getCurrentPages();
	let curPage = pages[pages.length - 1].$page.fullPath;
	uni.share({
		provider: "weixin",
		scene: "WXSceneSession",
		type: 5,
		miniProgram: {
		    id:  config.wxChatAppId,
		    path: decodeURIComponent(curPage),
			type: 0,
			webUrl: 'http://uniapp.dcloud.io'
		},
		title: "南舒房",// 分享标题
		summary: props.roomName,// 分享内容文字
		imageUrl: `${props.bannerList[0]}@oosImage|384h_480w_0e`,//分享封面图片
		success: function(res) {
			console.log(res)
		},
		fail: function(err) {
			console.log(err)
		}
	});
})
</script>

<style lang="scss" scoped>
.banner{
	position: relative;
	.swiper{
		height: 516rpx;
		.swiper-item{
			width: 100%;
			height: 516rpx;
		}
	}
	.numbox{
		position: absolute;
		right: 32rpx;
		bottom: 44rpx;
		background: rgba(0,0,0,0.3);
		border-radius: 200rpx;
		color: #fff;
		padding: 0 20rpx;
		line-height: 36rpx;
		font-size: 24rpx;
	}
	.topBtn{
		.back{
			position: absolute;
			top: calc(10rpx + var(--status-bar-height));
			/* #ifdef H5 */
			top: 20rpx;
			/* #endif */
			left: 32rpx;
			.img{
				width: 58rpx;
				height: 58rpx;
			}
		}
		.share{
			position: absolute;
			top: calc(10rpx + var(--status-bar-height));
			/* #ifdef H5 */
			top: 20rpx;
			/* #endif */
			right: 32rpx;
			.img{
				width: 58rpx;
				height: 58rpx;
			}
		}
	}
}
</style>
